<template>
  基础控件的演示
  <el-row :gutter="19">
    <el-col :span="20">
      <el-row :gutter="20">
        <el-col :span="3">标签</el-col>
        <el-col :span="11">二次封装的控件</el-col>
        <el-col :span="10">可以赋值</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">单行文本：</el-col>
        <el-col :span="11"><nf-text :model="model" v-bind="textMeta"></nf-text></el-col>
        <el-col :span="10"><el-input v-model="model.text"></el-input></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">多行文本：</el-col>
        <el-col :span="11"><nf-area :model="model" v-bind="textAreaMeta"></nf-area></el-col>
        <el-col :span="10"><el-input v-model="model.area"></el-input></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">密码：</el-col>
        <el-col :span="11"><nf-password :model="model" v-bind="passwordMeta"></nf-password></el-col>
        <el-col :span="10"><el-input v-model="model.password"></el-input></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">URL：</el-col>
        <el-col :span="11"><nf-url :model="model" v-bind="urlMeta"></nf-url></el-col>
        <el-col :span="10"><el-input v-model="model.url"></el-input></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">颜色：</el-col>
        <el-col :span="11"><nf-color :model="model" v-bind="colorMeta"></nf-color></el-col>
        <el-col :span="10"><el-input v-model="model.color"></el-input></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">选择：</el-col>
        <el-col :span="11"><nf-autocomplete :model="model" v-bind="autocompleteMeta"></nf-autocomplete></el-col>
        <el-col :span="10"><el-input v-model="model.autocomplete"></el-input></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">数字：</el-col>
        <el-col :span="11"><nf-number :model="model" v-bind="numberMeta"></nf-number></el-col>
        <el-col :span="10"><el-input v-model="model.number"></el-input></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">滑块：</el-col>
        <el-col :span="11"><nf-range :model="model" v-bind="rangeMeta"></nf-range></el-col>
        <el-col :span="10"><el-input v-model="model.range"></el-input></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">好评：</el-col>
        <el-col :span="11"><nf-rate :model="model" v-bind="rateMeta"></nf-rate></el-col>
        <el-col :span="10"><el-input v-model="model.rate"></el-input></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">日期：</el-col>
        <el-col :span="11"><nf-date :model="model" v-bind="dateMeta"></nf-date></el-col>
        <el-col :span="10"><el-input v-model="model.date"></el-input></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">日期时间：</el-col>
        <el-col :span="11"><nf-datetime :model="model" v-bind="datetimeMeta"></nf-datetime></el-col>
        <el-col :span="10"><el-input v-model="model.datetime"></el-input></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">时间p：</el-col>
        <el-col :span="11"><nf-time-picker :model="model" v-bind="timePickerMeta"></nf-time-picker></el-col>
        <el-col :span="10"><el-input v-model="model.time1"></el-input></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">时间s：</el-col>
        <el-col :span="11"><nf-time-select :model="model" v-bind="timeSelectMeta"></nf-time-select></el-col>
        <el-col :span="10"><el-input v-model="model.time2"></el-input></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">年月：</el-col>
        <el-col :span="11"><nf-month :model="model" v-bind="monthMeta"></nf-month></el-col>
        <el-col :span="10"><el-input v-model="model.month"></el-input></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">年周：</el-col>
        <el-col :span="11"><nf-week :model="model" v-bind="weekMeta"></nf-week></el-col>
        <el-col :span="10"><el-input v-model="model.week"></el-input></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">年：</el-col>
        <el-col :span="11"><nf-year :model="model" v-bind="yearMeta"></nf-year></el-col>
        <el-col :span="10"><el-input v-model="model.year"></el-input></el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="3">开关：</el-col>
        <el-col :span="11"><nf-switch :model="model" v-bind="switchMeta"></nf-switch></el-col>
        <el-col :span="10"><el-input v-model="model.switch"></el-input></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">选择：</el-col>
        <el-col :span="11"><nf-checkbox :model="model" v-bind="checkboxMeta"></nf-checkbox></el-col>
        <el-col :span="10"><el-input v-model="model.checkbox"></el-input></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">多选：</el-col>
        <el-col :span="11"><nf-checkboxs :model="model" v-bind="checkboxsMeta"></nf-checkboxs></el-col>
        <el-col :span="10"><el-input v-model="model.checkboxs"></el-input></el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="3">单选：</el-col>
        <el-col :span="11"><nf-radios :model="model" v-bind="radiosMeta"></nf-radios></el-col>
        <el-col :span="10"><el-input v-model="model.radios"></el-input></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">下拉单选：</el-col>
        <el-col :span="11"><nf-select :model="model" v-bind="selectMeta"></nf-select></el-col>
        <el-col :span="10"><el-input v-model="model.select"></el-input></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">联动：</el-col>
        <el-col :span="11"><nf-select-cascader :model="model" v-bind="selectCascaderMeta"></nf-select-cascader></el-col>
        <el-col :span="3"><el-input v-model="model.selectCascader1"></el-input></el-col>
        <el-col :span="3"><el-input v-model="model.selectCascader2"></el-input></el-col>
        <el-col :span="3"><el-input v-model="model.selectCascader3"></el-input></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">下拉多选：</el-col>
        <el-col :span="11"><nf-selects :model="model" v-bind="selectsMeta"></nf-selects></el-col>
        <el-col :span="10"><el-input v-model="model.selectMore"></el-input></el-col>
      </el-row>
    </el-col>
    <el-col :span="4">
      查看 model 的值
      <div
        v-for="(item, key, index) in model"
        :key="index"
      >
        {{key}}： {{item}}
      </div>
    </el-col>
  </el-row>
  
  <el-button @click="add">自增</el-button>
  
</template>

<script>
  import { reactive, ref, watch, nextTick } from 'vue'
  import { ElRow, ElCol, ElButton, ElInput } from 'element-plus'
  // import { formItem } from '/nf-ui-elp'

  const textMeta = reactive({
    colName: 'text',
    delay: 500
  })
  const textAreaMeta = reactive({
    colName: 'area',
    maxlength: "100"
  })
  const passwordMeta = reactive({
    colName: 'password'
  })
  const urlMeta = reactive({
    colName: 'url'
  })
  const colorMeta = reactive({
    colName: 'color'
  })
  const autocompleteMeta = reactive({
    colName: 'autocomplete',
    optionList: [
      { value: '选项一', label: '1' },
      { value: '选项二', label: '2' },
      { value: '选项三', label: '3' },
      { value: '选项四', label: '4' },
      { value: '选项五', label: '5' },
      { value: '选项六', label: '6' },
      { value: '选项七', label: '7' }
    ]
  })
  const numberMeta = reactive({
    colName: 'number'
  })
  const rangeMeta = reactive({
    colName: 'range'
  })
  const rateMeta = reactive({
    colName: 'rate'
  })
  const dateMeta = reactive({
    colName: 'date',
    valueFormat: 'YYYY-MM-DD'
  })
  const datetimeMeta = reactive({
    colName: 'datetime'
  })
  const monthMeta = reactive({
    colName: 'month'
  })
  const timePickerMeta = reactive({
    colName: 'time1'
  })
  const timeSelectMeta = reactive({
    colName: 'time2'
  })
  const weekMeta = reactive({
    colName: 'week'
  })
  const yearMeta = reactive({
    colName: 'year'
  })
  const switchMeta = reactive({
    colName: 'switch'
  })
  const checkboxMeta = reactive({
    colName: 'checkbox'
  })
  const checkboxsMeta = reactive({
    colName: 'checkboxs',
    optionList: [
      { value: 1, label: '选项一' },
      { value: 2, label: '选项二' },
      { value: 3, label: '选项三' },
      { value: 4, label: '选项四' },
      { value: 5, label: '选项五' },
      { value: 6, label: '选项六' },
      { value: 7, label: '选项七' }
    ]
  })
  const radiosMeta = reactive({
    colName: 'radios',
    optionList: [
      { value: 1, label: '选项一' },
      { value: 2, label: '选项二' },
      { value: 3, label: '选项三' },
      { value: 4, label: '选项四' },
      { value: 5, label: '选项五' },
      { value: 6, label: '选项六' },
      { value: 7, label: '选项七' }
    ]
  })
  const selectMeta = reactive({
    colName: 'select',
    optionList: [
      { value: 1, label: '选项一' },
      { value: 2, label: '选项二' },
      { value: 3, label: '选项三' },
      { value: 4, label: '选项四' },
      { value: 5, label: '选项五' },
      { value: 6, label: '选项六' },
      { value: 7, label: '选项七' }
    ]
  })
  const selectsMeta = reactive({
    colName: 'selectMore',
    optionList: [
      { value: 1, label: '选项一' },
      { value: 2, label: '选项二' },
      { value: 3, label: '选项三' },
      { value: 4, label: '选项四' },
      { value: 5, label: '选项五' },
      { value: 6, label: '选项六' },
      { value: 7, label: '选项七' }
    ]
  })
  const selectCascaderMeta = reactive({
    colName: 'selectCascader1_selectCascader2_selectCascader3',
    optionList: [
      {
        value: 'zhinan',
        label: '指南',
        children: [
          {
            value: 'shejiyuanze',
            label: '设计原则',
            children: [
              { value: 'yizhi', label: '一致' },
              { value: 'fankui', label: '反馈' },
              { value: 'xiaolv', label: '效率' },
              { value: 'kekong', label: '可控' }
            ]
          },
          {
            value: 'daohang',
            label: '导航',
            children: [
              { value: 'cexiangdaohang', label: '侧向导航' },
              { value: 'dingbudaohang', label: '顶部导航' }
            ]
          }
        ]
      },
      {
        value: 'zujian',
        label: '组件',
        children: [
          {
            value: 'basic',
            label: 'Basic',
            children: [
              { value: 'layout', label: 'Layout 布局' },
              { value: 'color', label: 'Color 色彩' },
              { value: 'typography', label: 'Typography 字体' },
              { value: 'icon', label: 'Icon 图标' },
              { value: 'button', label: 'Button 按钮' }
            ]
          },
          {
            value: 'form',
            label: 'Form',
            children: [
              { value: 'radio', label: 'Radio 单选框' },
              { value: 'checkbox', label: 'Checkbox 多选框' },
              { value: 'input', label: 'Input 输入框' },
              { value: 'input-number', label: 'InputNumber 计数器' },
              { value: 'select', label: 'Select 选择器' },
              { value: 'cascader', label: 'Cascader 级联选择器' },
              { value: 'switch', label: 'Switch 开关' },
              { value: 'slider', label: 'Slider 滑块' },
              { value: 'time-picker', label: 'TimePicker 时间选择器' },
              { value: 'date-picker', label: 'DatePicker 日期选择器' },
              { value: 'datetime-picker', label: 'DateTimePicker 日期时间选择器' },
              { value: 'upload', label: 'Upload 上传' },
              { value: 'rate', label: 'Rate 评分' },
              { value: 'form', label: 'Form 表单' }
            ]
          },
          {
            value: 'data',
            label: 'Data',
            children: [
              { value: 'table', label: 'Table 表格' },
              { value: 'tag', label: 'Tag 标签' },
              { value: 'progress', label: 'Progress 进度条' },
              { value: 'tree', label: 'Tree 树形控件' },
              { value: 'pagination', label: 'Pagination 分页' },
              { value: 'badge', label: 'Badge 标记' }
            ]
          },
          {
            value: 'notice',
            label: 'Notice',
            children: [
              { value: 'alert', label: 'Alert 警告' },
              { value: 'loading', label: 'Loading 加载' },
              { value: 'message', label: 'Message 消息提示' },
              { value: 'message-box', label: 'MessageBox 弹框' },
              { value: 'notification', label: 'Notification 通知' }
            ]
          },
          {
            value: 'navigation',
            label: 'Navigation',
            children: [
              { value: 'menu', label: 'NavMenu 导航菜单' },
              { value: 'tabs', label: 'Tabs 标签页' },
              { value: 'breadcrumb', label: 'Breadcrumb 面包屑' },
              { value: 'dropdown', label: 'Dropdown 下拉菜单' },
              { value: 'steps', label: 'Steps 步骤条' }
            ]
          },
          {
            value: 'others',
            label: 'Others',
            children: [
              { value: 'dialog', label: 'Dialog 对话框' },
              { value: 'tooltip', label: 'Tooltip 文字提示' },
              { value: 'popover', label: 'Popover 弹出框' },
              { value: 'card', label: 'Card 卡片' },
              { value: 'carousel', label: 'Carousel 走马灯' },
              { value: 'collapse', label: 'Collapse 折叠面板' }
            ]
          }
        ]
      },
      {
        value: 'ziyuan',
        label: '资源',
        children: [
          { value: 'axure', label: 'Axure Components' },
          { value: 'sketch', label: 'Sketch Templates' },
          { value: 'jiaohu', label: '组件交互文档' }
        ]
      }
    ]
  })
  const Meta = reactive({
    colName: ''
  })
  
  
</script>

<script setup>
  
  /*
  const {
    // 文本
    nfText,
    nfArea,
    nfPassword,
    nfUrl,
    nfColor,
    nfAutocomplete,
    // 数字
    nfNumber,
    nfRange,
    nfRate,
    // 日期时间
    nfDate,
    nfDatetime,
    nfMonth,
    nfTimePicker,
    nfTimeSelect,
    nfWeek,
    nfYear,
    // 选择
    nfSwitch,
    nfCheckbox,
    nfCheckboxs,
    nfRadios,
    // 下拉
    nfSelect,
    nfSelectCascader,
    nfSelects
  } = formItem
  */
 
  const model = reactive({
    text: '', // 单行文本
    area: '1234', // 多行文本
    password: '', // 密码
    url: '', // 网址
    color: '', // 颜色
    autocomplete: '', // 可填可选
    number: 1, // 数字
    range: 1, // 滑块
    rate: 1, // 星星
    date: '1620140800000', // 日期
    datetime: '', // 日期
    time1: '', // 时间
    time2: '', // 时间
    month: '',
    week: '',
    year: '',
    switch: false, // 开关
    radio: null, // 单选组
    checks: [], // 多选组
    selectId: null, // 下拉单选
    selectMore: [], // 下拉单选多选
    selectCascader: [], // 下拉级联
    selectCascader1: '', // 下拉级联
    selectCascader2: '', // 下拉级联
    selectCascader3: '', // 下拉级联
    selectwrite: null, // 可选可填
    check: false,
    select: [],
    myName: ''
  })

  watch(model, (v1, v2, v3) => {
   
  })

  const add = () => {
   
  }

</script>